<template>
	<div class="shangpin">
    <div class="top">
      <div class="w1200 flex" style="display: flex; justify-content: space-between; align-items: center; height: 80px;">
        <div class="logo"><img :src="srclogo" style=" width: 247px; height: 49px;"></div>
        <!--        <div class="name">添加客服知识</div>-->
        <div class="nava">
          <router-link to="/shangpinlist">商品问题库</router-link>
          <router-link to="/kefulist">客服知识库</router-link>
        </div>
      </div>
    </div>
      <div class="center" ref="center">
        <div class="w1200">
          <div class="centerall">
            <div class="flex">
              <div class="c1">商品编码：</div>
              <div class="c2"><el-input v-model="sku" placeholder="请输入知识点名称"></el-input></div>
            </div>
            <div class="flex">
              <div class="c1">问题标题：</div>
              <div class="c2"><el-input v-model="title" placeholder="请输入问题标题"></el-input></div>
            </div>
            <div class="flex">
              <div class="c1">问题详情：</div>
              <div class="c2">
                <div id="editor">

                </div>
              </div>
            </div>
            <div class="flex">
              <div class="c1"></div>
              <div class="c2"><el-button type="primary" @click="go(1)">发布</el-button><el-button type="primary" @click="go(2)">发布并新建下一个</el-button></div>
            </div>
          </div>
        </div>
      </div>
	</div>
</template>

<script>
  import E from "wangeditor";
  import axios from "axios";
	export default{
		name: 'shangpin',
		data(){
			return{
				msg:"hello",
        srclogo:"./static/img/zhishilogo.png",
        sku:"",
        title:"",
        tag:"",
        type:"",
        content:"",
        id:""
			}
		},
    mounted() {
      this.$refs.center.style.minHeight = document.documentElement.clientHeight - 80 + 'px'
      var that = this
      this.editor = new E('#editor');
      this.editor.customConfig.uploadImgServer = '/upload'
      this.editor.customConfig.showLinkImg = false
      this.editor.customConfig.onchange = function (html) {
        that.content = html
      }
      this.editor.customConfig.customUploadImg = function (files, insert) {
        var formData = new FormData();
        formData.append("pic",files[0]);
        axios.post('/api/plan-market/order-page/upload-pic',formData)
          .then(response => {
            if(response.data.msg.code == 0){
              insert(response.data.data)

            }else{
              that.$message.error(response.data.msg.info);
            }
          })
      }
      this.editor.create();

      console.log(this.$route.query.id)
      if(this.$route.query.id){
        axios.get('/api/plan-market/question/detail?id='+this.$route.query.id)
          .then(response => {
            if(response.data.msg.code == 0){
              that.sku = response.data.data.sku
              that.title = response.data.data.title
              that.tag = response.data.data.tag
              that.type = response.data.data.type
              that.content = response.data.data.content
              that.editor.txt.html(response.data.data.content)
            }else{
              that.$message.error(response.data.msg.info);
            }
          })
      }else{

      }
    },
    methods:{

      go:function (id) {
        var that = this
        var data = {}
        data['sku'] = this.sku
        data['title'] = this.title
        data['type'] = 0
        data['content'] = this.content
        if(this.$route.query.id){
          data['id'] = this.$route.query.id;
          axios.post('/api/plan-market/question/update',data)
            .then(response => {
              if(response.data.msg.code == 0){
                that.$router.push({path:"/shangpinlist"})
              }else{
                that.$message.error(response.data.msg.info);
              }
            })
        }else{
          axios.post('/api/plan-market/question/create',data)
            .then(response => {
              if(response.data.msg.code == 0){
                if(that.$route.query.id){
                  that.$router.push({path:"/shangpinlist"})
                }
                if(id == 1){
                  that.$router.push({path:"/shangpinlist"})
                }
                if(id == 2){
                  that.$message.success('发布成功了，再来一个吧！');
                  that.sku = ''
                  that.title = ''
                  that.type = ''
                  that.content = ''
                  that.editor.txt.html('')
                }


              }else{
                that.$message.error(response.data.msg.info);
              }
            })
        }

      }
    }
	}
</script>

<style lang="scss" scoped>
/deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
	.shangpin{
		margin: 0; padding: 0; background: #EFEFEF; font-family: "Microsoft JhengHei";
    .w1200{ width: 1200px; margin: 0 auto;}
    .nava{
      a{ color: #ffffff; font-size: 16px; margin-right: 20px; padding: 10px 0; position: relative; top: 10px;}
    }
    .router-link-active{
      border-bottom: 4px #ffffff solid; font-weight: bold;
    }
		.top{ height: 80px; background: #42628D; display: flex; color: #ffffff; font-size: 25px; font-weight: bold;}
    .name{ display: flex; align-items: center; height: 80px;}
    .centerall{ border: 1px #EAEAEA solid; background: #ffffff; padding: 50px;}
    .flex{ display: flex; margin-bottom: 20px;}
    .c1{ width: 100px; line-height: 36px; font-size: 14px;}
    .c2{ width: 1100px;}
	}
</style>
